<script setup>
import { NButton, NSpace, NText, NMenu, NGradientText } from "naive-ui";
import { RouterLink } from "vue-router";
import { ref, reactive, h } from "vue";

function getMemuItemVNode(routeTo, btnContent) {
    return () => h(
        RouterLink,
        {
            to: routeTo,
        },
        {
            default: () => h(
                NSpace,
                {
                    size: "large",
                    justify: "center"
                },
                {
                    default: () => h(
                        NButton,
                        {
                            text: true,
                            size: "large",
                            strong: true
                        },
                        {
                            default: () => btnContent
                        }
                    )
                }
            )
        }
    )
}

const activeKey = ref(null)

const menuOptions = [
    {
        label: getMemuItemVNode('/launch', "启动"),
        key: "launchKey"
    },
    {
        label: getMemuItemVNode('/setting', "配置"),
        key: "settingkey"
    },
    {
        label: getMemuItemVNode('/download', "下载"),
        key: "downloadKey"
    },
    {
        label: getMemuItemVNode('/mod', "模组"),
        key: "modKey"
    },
    {
        label: getMemuItemVNode('/online', "联机"),
        key: "onlineKey"
    },
    {
        label: getMemuItemVNode('/about', "关于"),
        key: "aboutKey"
    },
]

</script>

<template>
    <NMenu :options="menuOptions" v-model:value="activeKey"></NMenu>
</template>

<style scoped>
a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}
</style>